<template>
  <div id="content">
    <div class="maoTitle">
      <div class="title">
          <Title1></Title1>
        <Title2></Title2>
      </div>

      <div class="t3">
        <router-link to="/city" class="aa">长沙<img src="./img/下拉.png" alt="" class="down" /></router-link>
        <ul>
          <li><router-link to="/home/reying">热映</router-link></li>
          <li><router-link to="/home/yingyuan">影院</router-link></li>
          <li><router-link to="/home/daiying">待映</router-link></li>
          <li><router-link to="/home/jingdian">经典电影</router-link></li>
        </ul>
        <img
          src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/component/index/img/base64/search-red.png"
          alt=""
        />
      </div>
    </div>

    <div class="movie-con">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//引入头部
import Title1 from "../../components/Title1.vue";
import Title2 from "../../components/Title2.vue";
export default {
  name: "moive",
  components: {
    Title1,
    Title2,
  },
};
</script>

<style>
/*scoped 表示 样式只在当前页有效果  */
#content {
  margin: 0;
  padding: 0;
  background-color: white;
}

#content .maoTitle {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#content .maoTitle .t3 {
  height: 1.2rem;
  background-color: white;
  border-bottom: 0.026667rem solid rgb(194, 190, 190);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#content .maoTitle .t3 .aa{
  font-size: 15px;
  text-decoration: none;
  color: #333;
}

#content .maoTitle .t3 ul {
  width: 6.133333rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
#content .maoTitle .t3 img {
  width: 0.56rem;
}
#content .maoTitle .t3 .down {
  width: 0.32rem;
}

#content .maoTitle .t3 ul li {
  height: 1.066667rem;
  width: 0.933333rem;
  line-height: 1.066667rem;
}

#content .maoTitle .t3 ul li:nth-of-type(4),
#content .maoTitle .t3 ul li:nth-of-type(4) a {
  width: 1.813333rem;
}

#content .maoTitle .t3 ul li a {
  display: inline-block;
  color: rgb(100, 100, 100);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.373333rem;
  height: 1.02rem;
  width: 0.933333rem;
}
#content .maoTitle .t3 ul li a.router-link-exact-active {
  font-size: 0.453333rem;
  color: black;
  border-bottom: solid 0.05555rem red;
}
/* #content .maoTitle .t3 ul li:after{
    content: "";
    display: block;
    position: absolute;
    bottom: .02rem;
    width: .4rem;
    width: 5.33333333vw;
    border-radius: .02rem;
    height: .06rem;
    background-color: #f03d37;
    transition: left .2s;
} */
h1 {
  margin-top: 4.266667rem;
}
</style>